<script setup lang="ts">
import { ref } from "vue";
import { useRole } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";

import prompticon from "~icons/garden/alert-warning-fill-12";

defineOptions({
  name: "GroupCallReportForms"
});

const {
  permissions,

  dayjs,
  tabList,
  tab,

  selectedMonth,
  calendarDate,

  taskLoading,
  taskColumns,
  taskDataList,

  userLoading,
  userColumns,
  userDataList,
  timeDataList,
  timeColumns,
  timeLoading,
  callData,

  handleMonthChange,
  isHoliday,
  onTimeSearch,

  onTaskSearch,

  onUserSearch,

  deviceDetection,
  getCheckedDayData,
  getMonth,
  changeRadio
} = useRole();

const watchCalendarChange = () => {
  const clickDate = dayjs(calendarDate.value).format("YYYY-MM");
  if (clickDate !== selectedMonth.value) {
    getMonth(clickDate)
  }
  selectedMonth.value = clickDate
  if( tab.value == "群呼指征" ){
    callData.value = {}
    getCheckedDayData(dayjs(calendarDate.value).format("YYYY-MM-DD"));
  }else if( tab.value == "任务指征" ){
    taskDataList.value = []
    onTaskSearch(dayjs(calendarDate.value).format("YYYY-MM-DD"))
  }else if( tab.value == "成员指征" ){
    userDataList.value = []
    onUserSearch(dayjs(calendarDate.value).format("YYYY-MM-DD"))
  }else{
    timeDataList.value = []
    onTimeSearch(dayjs(calendarDate.value).format("YYYY-MM-DD"))
  }

};
</script>

<template>
  <div :class="['flex', 'justify-between', deviceDetection() && 'flex-wrap']">
    <div :class="['mr-2', deviceDetection() ? 'w-full' : 'w-[400px]']">
      <div
        class="h-full bg-bg_color overflow-hidden relative"
        :style="{ minHeight: `calc(100vh - 141px)` }"
      >
        <div class="cardTab" v-if="tabList.length">
          <el-radio-group v-model="tab" @change="changeRadio">
            <el-radio-button
              v-for="(item, index) in tabList"
              :key="index"
              :label="item.label"
              :value="item.label"
            />
          </el-radio-group>
        </div>

        <template v-if="permissions.is_callCount_calendar">
          <el-calendar
            v-model="calendarDate"
            @update:model-value="watchCalendarChange"
          >
            <template #header="{ date }">
              <el-date-picker
                v-model="selectedMonth"
                type="month"
                placeholder="选择月份"
                format="YYYY年MM月"
                value-format="YYYY-MM"
                @change="handleMonthChange"
              />
            </template>
            <template #date-cell="{ data }">
              {{ data.day.split("-").slice(2).join("-") }}
              <div v-if="isHoliday(data.day)" class="holiday-mark"></div>
            </template>
          </el-calendar>

          <div class="tip">
            <IconifyIconOffline
              :icon="prompticon"
              style="color: #999999; width: 20px; height: 20px"
            />
            <p>
              提示：当天如果有圆点<span
              ></span>标记，表示当天有外呼拨打。点击即可查看当天统计数据。
            </p>
          </div>
        </template>
      </div>
    </div>

    <div
      :class="[deviceDetection() ? ['w-full', 'mt-2'] : 'w-[calc(100%-400px)]']"
    >
      <div
        class="bg-bg_color w-full pt-[12px] pb-[12px]"
        style="text-align: center"
      >
        {{ dayjs(calendarDate).format("YYYY-MM-DD") }}
      </div>

      <template v-if="tab == '群呼指征'">
        <div class="bg-bg_color mt-2 p-3">
          <el-descriptions
            title=""
            size="large"
            :label-width="120"
            :column="2"
            border
          >
            <el-descriptions-item label-align="right" label="日期">{{
              callData.day
            }}</el-descriptions-item>
            <el-descriptions-item label-align="right" label="消费金额">{{
              callData.cost
            }}</el-descriptions-item>

            <el-descriptions-item label-align="right" label="呼叫总数">{{
              callData.callAll
            }}</el-descriptions-item>
            <el-descriptions-item label-align="right" label="呼入数">{{
              callData.callinCnt
            }}</el-descriptions-item>
            <el-descriptions-item
              label-align="right"
              label="呼出数"
              :span="2"
              >{{ callData.calloutCnt }}</el-descriptions-item
            >

            <el-descriptions-item label-align="right" label="应答数">{{
              callData.answer
            }}</el-descriptions-item>
            <el-descriptions-item label-align="right" label="应答率">{{
              callData.answerRate
            }}</el-descriptions-item>
            <el-descriptions-item label-align="right" label="成功数">{{
              callData.success
            }}</el-descriptions-item>
            <el-descriptions-item label-align="right" label="成功率">{{
              callData.successRate
            }}</el-descriptions-item>
            <el-descriptions-item label-align="right" label="转接数">{{
              callData.transfer
            }}</el-descriptions-item>
            <el-descriptions-item label-align="right" label="转接率">{{
              callData.transferRate
            }}</el-descriptions-item>
            <el-descriptions-item label-align="right" label="呼损数">{{
              callData.lose
            }}</el-descriptions-item>
            <el-descriptions-item label-align="right" label="呼损率">{{
              callData.loseRate
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </template>

      <template v-if="tab == '任务指征'">
        <PureTableBar title="" :columns="taskColumns" @refresh="onTaskSearch">
          <template v-slot="{ size, dynamicColumns }">
            <pure-table
              align-whole="center"
              showOverflowTooltip
              table-layout="auto"
              :loading="taskLoading"
              adaptive
              :adaptiveConfig="{ offsetBottom: 50 }"
              :data="taskDataList"
              :columns="dynamicColumns"
              :header-cell-style="{
                background: 'var(--el-fill-color-light)',
                color: 'var(--el-text-color-primary)'
              }"
            ></pure-table>
          </template>
        </PureTableBar>
      </template>

      <template v-if="tab == '成员指征'">
        <PureTableBar title="" :columns="userColumns" @refresh="onUserSearch">
          <template v-slot="{ size, dynamicColumns }">
            <pure-table
              align-whole="center"
              showOverflowTooltip
              table-layout="auto"
              :loading="userLoading"
              adaptive
              :adaptiveConfig="{ offsetBottom: 50 }"
              :data="userDataList"
              :columns="dynamicColumns"
              :header-cell-style="{
                background: 'var(--el-fill-color-light)',
                color: 'var(--el-text-color-primary)'
              }"
            ></pure-table>
          </template>
        </PureTableBar>
      </template>
      <template v-if="tab == '时段指征'">
        <PureTableBar title="" :columns="timeColumns" @refresh="onTaskSearch">
          <template v-slot="{ size, dynamicColumns }">
            <pure-table
              align-whole="center"
              showOverflowTooltip
              table-layout="auto"
              :loading="timeLoading"
              adaptive
              :adaptiveConfig="{ offsetBottom: 50 }"
              :data="timeDataList"
              :columns="dynamicColumns"
              :header-cell-style="{
                background: 'var(--el-fill-color-light)',
                color: 'var(--el-text-color-primary)'
              }"
            ></pure-table>
          </template>
        </PureTableBar>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-calendar__body) {
  padding: 0 12px 20px;
  font-size: 14px;
}

:deep(.el-calendar-table thead th) {
  padding: 8px 0;
}

:deep(.el-calendar__header) {
  padding: 12px 12px;
}

:deep(.el-calendar-day) {
  height: 54px;
}

.main-content {
  margin: 12px 12px 0 !important;
}

.cardTab {
  padding: 12px 12px 0;
}

.holiday-mark {
  width: 10px;
  height: 10px;
  background-color: var(--pure-theme-menu-active-before);
  border-radius: 10px;
  margin-top: 4px;
}

:deep(.el-calendar-table td.is-selected) {
  background-color: var(--pure-theme-menu-active-before);
  color: #ffffff;
  .holiday-mark {
    background-color: #ffffff;
  }
}

:deep(.el-calendar-table .el-calendar-day:hover) {
  background-color: var(--pure-theme-menu-active-before);
  color: #ffffff;
  .holiday-mark {
    background-color: #ffffff;
  }
}

.tip {
  display: flex;
  align-items: flex-start;
  margin: 0 12px;
  background-color: #f0f0f0;
  border: 1px solid #d9d9d9;
  padding: 3px 6px;
  line-height: 21px;

  p {
    font-size: 12px;
    color: #999999;
    margin-left: 5px;
    font-weight: bold;
    span {
      width: 10px;
      height: 10px;
      background-color: var(--pure-theme-menu-active-before);
      border-radius: 10px;
      display: inline-block;
      margin: 0 4px;
    }
  }
}
</style>
